<template>
  <div>
    <van-sticky>
      <div>
      <NavBar @left-click-event="goBack" :title="title"></NavBar>
    </div>
    <MyTabbar @tabbar-change-event="getProductList"></MyTabbar>
  </van-sticky>
   
    <ProductList :list="productList"></ProductList>
  </div>
</template>
<script setup>
import { ref ,onMounted} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import NavBar from '@/components/NavBar.vue';
import MyTabbar from '@/components/MyTabbar.vue';
import ProductList from '@/components/ProductList.vue';
import {goodsList as goodsListApi} from '@/api/home'
const route = useRoute()
const router = useRouter()
const title = ref('')
const isHot = ref('')
const isNew = ref('')
const order = ref('')
const productList = ref([])
title.value = route.query.flag
if(title.value === '新品首发'){
  isNew.value = 1
}else {
  isHot.value = 1
}
onMounted( ()=>{
  getProductList('')
})

const getProductList = async (params)=>{
  console.log("params====>",params);
  if(params === 'up'){
    order.value = 'asc'
  }else if(params === 'down'){
    order.value = 'desc'
  }else{
    order.value = ''
  }
  const res = await goodsListApi({isHot:isHot.value,isNew:isNew.value,order:order.value})
  productList.value = res.data
}







const goBack = ()=>{
  router.go(-1)
}


</script>
<style lang="scss" scoped>
</style>